<!DOCTYPE html>
<#assign ctx=request.contextPath />
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信管理系统</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/assets/css/login.css">
    <script src="https://api.geetest.com/get.php"></script>
</head>
<body>


<div class="wrapper">

    <div class="container">
        <h1>微信管理系统</h1>

        <form class="form" method="post" action="${ctx}/login">
            <input type="text" name="username" placeholder="用户名">
            <input type="password" name="password" placeholder="密码">
            <div id="validate" class="validate"></div>
            <button type="submit" id="login-button">登录</button>
        </form>
    </div>

    <ul class="bg-bubbles">
        <li><h1 align="center">微</h1></li>
        <li><h1 align="center" style="padding: 20px;">信</h1></li>
        <li><h1 align="center">管</h1></li>
        <li><h1 align="center" style="padding: 10px;">理</h1></li>
        <li></li>
        <li><h1 align="center" style="padding: 40px;">系</h1></li>
        <li><h1 align="center" style="padding: 50px;">统</h1></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script type="text/javascript" src="${ctx}/assets/js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $("#login-button").hide();

        var captcha = new Geetest({
            gt: "${captchaId}",
            challenge: "${challengeId}",
            product: "float",
            lang: 'zh-cn'
        }).appendTo("#validate");

        captcha.onStatusChange(function (message) {
            if ("Success" == message) {
                $("#login-button").fadeIn(100);
            } else {
                $("#login-button").hide();
            }

        });

        captcha.onError(function () {
            $("#login-button").hide();
        });

        $('#login-button').click(function (event) {
            event.preventDefault();

            var username = $.trim($("input[name=username]").val());
            if (username == "") {
                return;
            }

            var password = $.trim($("input[name=password]").val());
            if (password == "") {
                return;
            }

            $("form").submit();

            //var params = $("form").serialize();

            //$('form').fadeOut(200);
            //$('.wrapper').addClass('form-success');
        });

    });
</script>

</body>
</html>